<template>
  <component :is="views[active]"></component>
  <TabBar v-model="active">
    <TabBarItem class="home">首页</TabBarItem>
    <TabBarItem class="fenlei">分类</TabBarItem>
    <TabBarItem class="gouwuche">购物车</TabBarItem>
    <TabBarItem class="wode">我的</TabBarItem>
  </TabBar>

</template>

<script setup>
import TabBar from './components/TabBar.vue';
import TabBarItem from './components/TabBaritem.vue';
import { ref } from 'vue';
import HomeView from './views/HomeView.vue'
import FenleiView from './views/FenleiView.vue'
import Gouwuche from './views/GouwucheView.vue'
import WodeView from './views/WodeView.vue'
const active = ref(0);
const views = [HomeView, FenleiView, Gouwuche, WodeView]
</script>

<style scoped></style>